<template>
  <div class="father">
    <div class="son1">
      <h1 align="center" class="none">登录</h1>
      <p align="center" class="none">欢迎来到登录页面</p>
      <div class="none">
        <div class="zh">
          <span class="warn">
            <em v-show="uname.length >= 12">账号长度超过12</em>
          </span>
          <br>
          <i>账号</i>
          <input value="" type="text" class="input" id="uname" maxlength="12" v-model="uname" name="id">
        </div>
        <div class="son4">
          <span class="warn">
            <em v-show="pwd.length >= 12">密码长度超过12</em>
          </span>
          <br>
          <i>密码</i>
          <input type="password" value="" id="upass" class="input" v-model="pwd" name="pwd" maxlength="12">
          <br>
        </div>
        <p style="font-size:20px; float:left; margin-left:15px;margin-top:15px;">会员登录</p>
        <input type="radio" value="会员登录" id="radio" @click="change()" :checked="checked" style="margin-top:19px;">
        <input type="submit" id="submit" @click="Lojin()" class="submit">
      </div>
      <a class="ab none dotmove" @click="RootUserEncoll()">注册</a>
    </div>
    <div class="son2">
      <h1 align="center" class="None">登录</h1>
      <p align="center" class="None">欢迎来到会员登录页面</p>
      <div class="None">
        <div class="zh">
          <span class="warn">
            <em v-show="rootname.length >= 12">账号长度超过12</em>
          </span>
          <br>
          <i>账号</i>
          <input type="number" id="uname" class="input" v-model="rootname" maxlength="12" name="id">
        </div>
        <div class="son4">
          <span class="warn">
            <em v-show="rootpwd.length >= 12">密码长度超过12</em>
          </span>
          <br>
          <i>密码</i>
          <input type="password" value=" " class="input" id="upass" v-model="rootpwd" name="rootpwd" maxlength="12">
        </div>
        <input type="submit" id="submit" @click="Lojin()" class="submit">
      </div>
      <a class="ab None dotmove" @click="RootUserEncoll()">注册</a>
    </div>
  </div>


</template>

<script>
// import router from '@/router';
import axios from 'axios';
export default {
  data() {
    return {
      // user: localStorage.getItem("user") ? JSON.parse(getItem) : {}
      maizi: [],
      checked: true,
      pwd: '',
      rootpwd: '',
      rootname: '',
      uname: '',
      name: 'HelloWorld',
    }
  }, methods: {
    change() {
      this.checked = !this.checked
    }, Lojin() {
      axios({
        method: 'post',
        url: "http://localhost:8090/user/user/Login",
        params: {
          password: 'sss',
          id: 1
        }
      }).then(res => {
        if (res.data != null) {
          this.$store.state.user.HeadPicture = res.data.headPicture;
          this.$store.state.user.name = res.data.name;
          localStorage.setItem('access-admin', JSON.stringify(res.data))
          this.$router.push('/home')

        }
      }
      ).catch(error => {
        console.log(error.response)
      })
        ;
    }, RootUserEncoll() {
      this.$router.push('register')
    }
  },
  props: {
    msg: String
  }
}
</script>


<style scoped>
* {
  margin: 0;
  padding: 0;
  /* overflow: hidden; */
}


#radio {
  width: 20px;
  height: 20px;
}

body {
  overflow: hidden;
  display: flex;
  justify-content: center;
  align-items: center;
  height: 100vh;
  /* background-color: #f3f3f2; */
}

.father {
  width: 600px;
  height: 500px;
  background-color: pink;
  display: flex;
  overflow: hidden;
  justify-content: center;
  align-items: center;
  /* float: left; */
  justify-content: center;
  align-items: center;
  margin-top: 110px;
  margin-left: 450px;
}


.son1 {
  width: 120px;
  overflow: hidden;
  height: 100%;
  background-color: blue;
  transition: all .5s;
  background: url(../assets/login/紫霞仙子6.jpg) no-repeat;
  background-position: -140px -200px;
  /* transition: all .1s; */
}

.son1:hover {
  background: url(../assets/login/紫霞仙子7.jpg) no-repeat;
  background-position: -550px -100px;
  width: 100%;
}

.son1:hover+.son2 {
  width: 120px;
}

.son1>.none {
  display: none;
  /* transition: all .3s; */
}


.son1:hover .none {
  transition: all .3s;
  display: block;
}

.son1:hover~.son2>.None {
  transition: all .3s;
  display: none;
  background-image: url(../assets/login/紫霞仙子2.jpg) no-repeat;
}

.son2 {
  background: url(../assets/login/紫霞仙子3.jpg) no-repeat;
  background-position: -300px -100px;
  opacity: 1;
  transition: all .5s;
  width: 80%;
  flex-direction: column;
  height: 100%;
  background-color: rebeccapurple;
  margin: 0 auto;
}

h1 {
  color: rgba(222, 22, 22, 0.4);
  line-height: 100px;
  margin-bottom: 20px;
}



.zh,
.son4 {
  border-radius: 15px;
  font-size: 6px;
  margin-top: 10px;
}

p {
  margin-left: 20px;
  color: aqua;
  font-family: "微软雅黑";
  font-size: 30px;
  margin-bottom: 20px;
}


.input:not(#submit) {
  border-radius: 9px;
  border: 0;
  margin-left: 10px;
  height: 47px;
  width: 150px;
  font-size: 20px;
  transition: all .4s;
}

.input:hover:not(#submit) {
  width: 250px;
  background-color: pink;
}

button {
  width: 100px;
  height: 40px;
  font-size: 24px;
  border-radius: 4px;
  border: 0;
  background-color: aqua;
  margin-top: 50px;
  margin-left: 290px;
}


.ab {
  width: 50px;
  font-size: 24px;
  display: block;
  margin-left: 370px;
  margin-top: 80px;
  position: absolute;
}

i {
  margin-left: 40px;
  color: aqua;
  font-family: "微软雅黑";
  font-size: 30px;
  margin-bottom: 20px;
}

.dotmove {
  position: relative;
}

.submit {
  width: 110px;
  height: 50px;
  display: block;
  margin-top: 15px;
  margin-left: 280px;
  position: relative;
  float: left;
  background-color: aqua;
  border: 0;
  opacity: .8;
}

.warn {
  margin-left: 100px;
  color: red;
  font-family: "微软雅黑";
  font-size: 25px;
}
</style>
